<template>
    <div>
        <NavTopBar title="生成订单" fixed placeholder />

        <div class="address">
            <div class="address_user">
                <span>{{ address.userName }} </span>
                <span>{{ address.userPhone }}</span>
            </div>
            <div class="address_info">
                <span>{{ address.provinceName }}</span>
                <span>{{ address.cityName }}</span>
                <span>{{ address.regionName }} </span>
                <span>{{ address.detailAddress }}</span>
            </div>
            <van-icon
                class="address_select"
                name="arrow"
                @click="selectAddress"
            />
        </div>

        <GoodItem
            v-for="item of cartList"
            :key="item.goodsId"
            :item="item"
            noBtn
        />

        <div class="price">
            <p class="price_info">
                <span class="fl">商品金额</span>
                <span class="fr">¥3888</span>
            </p>
            <van-button
                class="price_btn"
                color="rgb(27, 174, 174)"
                size="small"
                type="primary"
                @click="createOrderBtn"
                >生成订单</van-button
            >
        </div>

        <van-popup
            closeable
            :close-on-click-overlay="false"
            v-model:show="showPay"
            position="bottom"
            :style="{ height: '30%' }"
            @close="close"
        >
            <div :style="{ width: '90%', margin: '0 auto', padding: '50px 0' }">
                <van-button
                    :style="{ marginBottom: '10px' }"
                    color="#1989fa"
                    block
                    @click="handlePayOrder(1)"
                    >支付宝支付</van-button
                >
                <van-button color="#4fc08d" block @click="handlePayOrder(2)"
                    >微信支付</van-button
                >
            </div>
        </van-popup>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { Toast } from "vant";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { getLocal, setLocal } from "@/utils/index";
import { getByCartItemIds, createOrder, payOrder } from "@/apis/goods";
import { getAddressDetail, getDefaultAddress } from "@/apis/address";
import NavTopBar from "@/components/NavTopbar.vue";
import GoodItem from "@/components/GoodsItem.vue";
export default defineComponent({
    components: { NavTopBar, GoodItem },
    setup() {
        const route = useRoute();
        const router = useRouter();
        const store = useStore();
        const state: any = reactive({
            cartList: [],
            address: {},
            showPay: false, //支付方式弹框
        });
        onMounted(() => {
            init();
        });

        const init = async () => {
            Toast.loading({ message: "加载中...", forbidClick: true });

            let { addressId, cartItemIds } = route.query;

            // 获取选中商品id
            cartItemIds = cartItemIds
                ? JSON.parse(cartItemIds as string)
                : JSON.parse(getLocal("cartItemIds") as string);

            // 存储选中商品id
            setLocal("cartItemIds", JSON.stringify(cartItemIds));

            // 获取默认地址
            const { data: address } = addressId
                ? await getAddressDetail(addressId)
                : await getDefaultAddress();

            if (!address) {
                router.push({ path: "/address" });
                return;
            }

            // 获取选中商品信息
            const { data: list } = await getByCartItemIds({
                cartItemIds: (cartItemIds as []).join(","),
            });

            state.cartList = list;
            state.address = address;
            Toast.clear();
        };

        // 改变地址
        const selectAddress = () => {
            router.push("/address");
        };

        // 生成订单
        const createOrderBtn = async () => {
            const params = {
                addressId: state.address.addressId,
                cartItemIds: state.cartList.map((item: any) => item.cartItemId),
            };
            const { data } = await createOrder(params);
            setLocal("cartItemIds", "");
            state.orderNo = data;
            state.showPay = true;
        };

        const close = () => {
            router.push({ path: "/order" });
        };

        // 支付
        const handlePayOrder = async (type: number) => {
            await payOrder({
                orderNo: state.orderNo,
                payType: type,
            });
            Toast.success("支付成功");
            store.commit("cart/fileCartListById", state.cartList);
            setTimeout(() => {
                router.push({ path: "/order" });
            }, 2000);
        };

        return {
            ...toRefs(state),
            selectAddress,
            createOrderBtn,
            close,
            handlePayOrder,
        };
    },
});
</script>

<style lang="scss" scoped>
.address {
    padding: 20px 20px;
    font-size: 14px;
    color: #222333;
    position: relative;
    background: #f6f6f6;
    &::before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        background: -webkit-repeating-linear-gradient(
            135deg,
            #ff6c6c 0,
            #ff6c6c 20%,
            transparent 0,
            transparent 25%,
            #1989fa 0,
            #1989fa 45%,
            transparent 0,
            transparent 50%
        );
        background: repeating-linear-gradient(
            -45deg,
            #ff6c6c 0,
            #ff6c6c 20%,
            transparent 0,
            transparent 25%,
            #1989fa 0,
            #1989fa 45%,
            transparent 0,
            transparent 50%
        );
        background-size: 80px;
        content: "";
    }
    &_user {
        margin: 10px 0;
    }
    &_info {
        margin: 10px 0;
    }
    &_select {
        position: absolute;
        right: 0;
        top: 50%;
        font-size: 18px;
        transform: translate((-50%, -50%));
    }
    span {
        margin-right: 5px;
    }
}
.price {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 15px;
    background: #fff;
    width: 100%;
    box-shadow: 0px 0px 5px #ccc;
    &_info {
        font-size: 14px;
        @include clearfix;
        span:last-child {
            color: red;
            font-size: 16px;
        }
    }
    &_btn {
        width: 100%;
        margin-top: 10px;
        line-height: 40px;
        height: 40px;
    }
}
</style>
